<template>
  <div class="config-item">
    <span class="label-item">数据库表</span>
    <template v-if="form.tableList && form.tableList.length > 0">
      <el-select
        v-model="form.tableName"
        placeholder="请选择数据库表"
        @change="changeTableName"
        class="add-table-select"
      >
        <el-option
          :label="item.tableName"
          :value="item.id"
          v-for="item in form.tableList"
          :key="item.value"
        ></el-option>
      </el-select>
    </template>
    <el-button type="primary" @click="addDatabaseDialog" class="add-table-btn">
      新建
    </el-button>
  </div>
  <gz-table :config="config">
    <template #mapValueSlot="{ row: scope }">
      <el-input
        size="mini"
        clearable
        v-model="scope.value"
        placeholder="请输入值映射"
      ></el-input>
    </template>
    <!-- 操作列插槽
    <template #handle="{ row: scope }">
      <el-button type="danger" @click="removeClick(scope)">删除</el-button>
    </template> -->
  </gz-table>
  <!-- 新建数据库 弹框 (el-dialog加的v-if为了让子组件每次都触发setup)-->
  <el-dialog
    title="新建"
    width="1100px"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    v-if="dialogVisible"
    @closed="closed"
  >
    <database-dialog ref="databaseRef"></database-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import databaseDialog from "@/views/addData/components/databaseDialog.vue";
import gzTable from "@/components/table/index.vue";

import { ref, reactive, toRefs, onMounted } from "vue";
export default {
  components: {
    databaseDialog,
    gzTable,
  },
  setup(props, ctx) {
    const databaseRef = ref(null);
    const dialogVisible = ref(false);
    const state = reactive({
      selectTableName: null,
      form: {
        tableList: [],
        tableName: "",
      },
      config: {
        // 表格样式
        style: {
          stripe: true,
          border: true,
          maxHeight: 500,
        },
        loading: false,
        // 列
        column: [
          {
            prop: "key",
            label: "列名",
            width: 200,
          },
          {
            prop: "value",
            label: "值映射",
            width: 200,
            slotName: "mapValueSlot",
          },
          // {
          //   type: "operate",
          //   label: "操作",
          //   width: 150,
          //   fixed: "right",
          //   slotName: "handle",
          // }
        ],
        tableData: [],
      },
    });
    onMounted(() => {
      getDataTableList(); // 获取数据库表,获取值映射表
    });
    // 获取数据库表 下拉数据
    const getDataTableList = async () => {
      let result = await vm.$store.dispatch("GET_DATA_TABLELIST", {
        limit: 10000, //当前页最大显示数
        page: 1, //当前页
      });
      state.form.tableList = result.records;
    };
    // 更改数据库表 - 获取对应列
    const changeTableName = async (value) => {
      state.config.loading = true;
      let tableNameList = state.form.tableList.filter((t) => {
        return t.id == value;
      });
      if (tableNameList && tableNameList.length > 0) {
        state.selectTableName = tableNameList[0].tableName;
      }
      let result = await vm.$store.dispatch("GET_BY_ID_TABLELIST", value);
      state.config.loading = false;
      state.config.tableData = result.tableColumns.map((t) => {
        return {
          key: t.columnName,
          value: "",
        };
      });
    };
    const addDatabaseDialog = () => {
      dialogVisible.value = true;
    };
    // 数据库弹窗关闭
    const closed = () => {
      ctx.emit("tableSuccessBuild");
    };
    // 数据库弹框 新建 确定
    const addSubmit = async () => {
      let remarks = databaseRef.value.tableRemarks;
      let tableData = databaseRef.value.config.tableData;
      let treeData = databaseRef.value.data;
      if (treeData && treeData.length == 0) {
        vm.$message.warning("入库表不能为空！");
        return false;
      }
      if (tableData && tableData.length == 0) {
        vm.$message.warning("入库列名不能为空！");
        return false;
      }
      let result = {
        tableName: treeData[0].label,
        remarks: remarks,
        primaryKeys: tableData
          .filter((t) => t.primaryKey)
          .map((p) => p.columnName),
        tableColumns: tableData.map((t) => {
          return {
            columnName: t.columnName,
            columnType: t.columnType,
            charOctetLength: t.charOctetLength,
            remarks: t.remarks,
            autoincrement: t.autoincrement,
            primaryKey: t.primaryKey,
          };
        }),
      };
      let res = await vm.$store.dispatch("ADD_DATA_TABLE", result);
      if (res && res.id) {
        vm.$message.success("数据库表新建成功！");
        ctx.emit("tableSuccessBuild");
        dialogVisible.value = false;
      }
    };

    // const removeClick = (data) => {
    //   console.log(data);
    // };
    return {
      databaseRef,
      dialogVisible,
      ...toRefs(state),
      getDataTableList,
      changeTableName,
      addDatabaseDialog,
      closed,
      addSubmit,
      // removeClick,
    };
  },
};
</script>

<style scoped>
.config-item {
  margin-bottom: 15px;
}
.config-item .label-item {
  width: 60px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
.config-item .add-table-select >>> .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.config-item .add-table-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: -1px;
}
</style>
